<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 600px;
            height: 600px;
            border: 1px solid;
            margin: 0 auto;
            position: relative;
        }
        .container div{
            width: 190px;
            height: 190px;
            border: 1px solid;
            position: absolute;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div style="left:2px;top:2px"></div>
        <div style="left:33.33%;top:2px"></div>
        <div style="left:66.66%;top:2px"></div>
        <div style="left:2px;top:33.33%"></div>
        <div style="left:33.33%;top:33.33%"></div>
        <div style="left:66.66%;top:33.33%"></div>
        <div style="left:2px;top:66.66%"></div>
        <div style="left:33.33%;top:66.66%"></div>
        <div style="left:66.66%;top:66.66%"></div>
    </div>
    <script>
        var colors = ["yellow","blue","red","green","pink","black","skyblue","orange","yellowgreen"];
        var divs = document.querySelectorAll(".container div");
        divs.forEach(function(item,key){
            item.style.background = colors[key];
        })

        // 需求 ：
        /* 
            1. 所有的方块都可以拖动
            2. 检测拖动方块和其他方块是否碰撞了；
            3. 需要和碰撞的元素碰撞面积最大的元素交互位置 
            4. 限定方块的拖拽范围
        */

        // 1.所有方块的拖拽 
        divs.forEach(function(div){
            div.onmousedown = function(e){
                var x = e.clientX - this.offsetLeft;
                var y = e.clientY - this.offsetTop;
                this.style.zIndex = 10;
                
                this.onmousemove = function(e){
                    var arr = [];
                    var xx = e.clientX;
                    var yy = e.clientY;
                    this.style.left = xx - x + "px"
                    this.style.top = yy - y + "px";

                    var that = this;
                    // 检测 拖动的元素 和其他剩余的8个元素是否碰撞了；
                    divs.forEach(function(item){
                        // console.log(isCrash(item,this));
                        // 检测碰撞的时候把自身去掉；
                        // 计算碰撞的元素和拖拽元素的碰撞面积
                        // 1.收集碰撞的元素 2.计算碰撞的面积
                        if(item!=that){
                            // console.log(isCrash(that,item));
                            if(isCrash(that,item)){
                                arr.push(item);
                            }
                        }
                    })
                    console.log(arr);

                }
                this.onmouseup = function(){
                    this.onmousemove = "";
                    this.style.zIndex = 0;
                }
            }
        })


        function isCrash(box1Ele, box2Ele) {
            // 检测 box1 和box2 在x轴上是否碰撞了；
            var minAx = box1Ele.offsetLeft;
            var maxAx = box1Ele.offsetLeft + box1Ele.offsetWidth;

            var minAy = box1Ele.offsetTop;
            var maxAy = box1Ele.offsetTop + box1Ele.offsetHeight;


            var minBx = box2Ele.offsetLeft;
            var maxBx = box2Ele.offsetLeft + box2Ele.offsetWidth;

            var minBy = box2Ele.offsetTop;
            var maxBy = box2Ele.offsetTop + box2Ele.offsetHeight;

            if (maxAx >= minBx && minAx <= maxBx && maxAy >= minBy && minAy <= maxBy) {
                // console.log("碰撞了");
                return true;
            }else{
                return false;
            }
        }

    </script>
</body>
</html>